<template>
<div>
  <el-dialog title="新增界面" :visible.sync="showFlag" @close="closeDialog" width="40%">
    <el-form ref="addStaffForm" :model="addStaffForm" :rules="addStaffRules" label-width="80px" :inline="true">
      <el-form-item label="姓名" prop="real_name">
        <el-input v-model="addStaffForm.real_name" placeholder="请输入员工姓名"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input v-model="addStaffForm.username" placeholder="请输入员工账号"></el-input>
      </el-form-item>
      <el-form-item label="员工电话" prop="tel">
        <el-input v-model="addStaffForm.tel" placeholder="请输入员工电话"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="addStaffForm.sex" placeholder="请选择性别">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="addStaffForm.status" placeholder="请选择是否启用">
          <el-option label="不启用" value="0"></el-option>
          <el-option label="启用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生年月" prop="birth">
        <el-date-picker v-model="addStaffForm.birth" type="date" placeholder="请选择入住日期" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="职务" prop="position">
        <el-input v-model="addStaffForm.position" placeholder="请输入职务"></el-input>
      </el-form-item>
      <el-form-item label="公寓名称" prop="apt_name">
        <el-input v-model="addStaffForm.apt_name" placeholder="请输入公寓名称"></el-input>
      </el-form-item>
      <el-form-item label="房间号" prop="room_id">
        <el-input v-model="addStaffForm.room_id" placeholder="请输入房间id"></el-input>
      </el-form-item>
      <el-form-item label="入住日期" prop="in_time">
        <el-date-picker v-model="addStaffForm.in_time" type="date" placeholder="请选择入住日期" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item class="dialog-footer" align="center">
        <el-button type="success" @click="onSave('addStaffForm')">保 存</el-button>
        <el-button @click="onCancel('addStaffForm')">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "addStaff",
  data(){
    const telValidate = (rule, value, callback) => {
      const reg = /^1[3|4|5|8][0-9]\d{4,8}$/
      if (!value) {
        callback(new Error('请输入手机号'))
      }  else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
  return{
    addStaffForm:{
      real_name:'',
      username:'',
      tel:'',
      birth:'',
      sex:'',
      position:'',
      apt_name:'',
      room_id:'',
      in_time:''
    },
    showFlag:false,
    addStaffRules:{
      real_name:[{required:true, message: '请输入员工姓名', trigger: 'blur' }],
      name: [{required:true, message: '请输入员工账号', trigger: 'blur' }],
      tel:[{required:true,validator: telValidate,message: '请输入员工联系电话', trigger: 'blur'}],
      status:[{required:true,message: '请员工状态',trigger: 'blur'}],
      sex:[{required:true,message: '请选择员工性别',trigger: 'blur'}],
    },
  }
  },
  methods: {
    init() {
      this.showFlag = true
    },
    //保存按钮
    onSave() {
      this.$refs.addStaffForm.validate(async valid=>{
        if(valid){
          let params={
            name:this.addStaffForm.name,
            tel:this.addStaffForm.tel,
            birth:this.addStaffForm.birth,
            gender:this.addStaffForm.gender,
            apt_name:this.addStaffForm.aptName,
            room_id:this.addStaffForm.roomId,
            in_time:this.addStaffForm.inTime
          }
          const {data:res}=await this.$http.post('/user/insertUser',params)
          if(res.code!==200) return this.$message.error('插入员工信息失败')
          this.$message.success('插入员工信息成功')
        }
      })
      this.showFlag = false
    },
    //取消按钮
    onCancel() {
      this.showFlag = false
      this.$refs.addStaffForm.resetFields()
    },
    //关闭对话框的回调函数
    closeDialog(){
      this.$emit('addCallBack')
      this.$refs.addStaffForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>